<!DOCTYPE html>
<html lang="zn-ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <style>
        #search_div {
            width: 200px;
            height: 100vh;
            position: fixed;
            top: 0px;
            right: 0px;
            z-index: 9999;
            border: 1px red solid;
            background: #fffA;
        }

        #search_result {
            background-color: aqua;
            height: 90vh;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div id="search_div">
    </div>
    <img id="img" src="image/robot.png">
    <img id="img" src="image/1631082821.jpg">
</body>
<style>
    #imgDiv {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: none;
        z-index: 9999;
        text-align: center;
        vertical-align: middle;
        background-color: #000A;
    }

    #rightButton {
        position: absolute;
        right: 20px;
        top: calc(50%);
        display: inline-block;
        width: 50px;
        height: 100px;
        color: #FFF;
        background-color: #fff0;
        border: 0px;
    }

    #rightButton:hover {
        border: 1px dashed #FFF;
    }

    #leftButton {
        position: absolute;
        left: 20px;
        top: calc(50%);
        display: inline-block;
        width: 50px;
        height: 100px;
        color: #FFF;
        background-color: #fff0;
        border: 0px;
    }

    #leftButton:hover {
        border: 1px dashed #FFF;
    }

    #centerImg{
    }

</style>
<script>

    let index = 0;
    let images = document.querySelectorAll("img");
    let img = document.getElementById("img")
    let div = document.createElement("div")
    div.id = "imgDiv"
    document.addEventListener("keydown", function (e) {
        console.log(e)
        if (e.key == "Escape") {
            div.style.display = "none"
        }
    })
    let leftButton = document.createElement("button");
    leftButton.id = "leftButton"
    leftButton.innerHTML = `<svg class="icon" style="width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4777"><path d="M256 512l512 320V192L256 512z" p-id="4778"></path></svg>`
    leftButton.addEventListener("click", function () {
        if (index > 0) {
            loadImg(--index)
        }
        
    })
    div.append(leftButton)

    let centerDiv = document.createElement("div")
    centerDiv.id = "centerDiv"
    let centerImg = document.createElement("img")
    centerImg.id="centerImg"
    centerDiv.append(centerImg)
    div.append(centerDiv)

    let rightButton = document.createElement("button");
    rightButton.id = "rightButton"
    rightButton.innerHTML = `<svg class="icon" style="width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2840"><path d="M768 512L256 832V192l512 320z" p-id="2841"></path></svg>`
    rightButton.addEventListener("click", function () {
        if (index < images.length) {
            loadImg(++index);
        }
        
    })
    div.append(rightButton)

    document.body.append(div)

    for (let i = 0; i < images.length; i++) {
        const element = images[i];
        element.addEventListener("dblclick", function (e) {
            div.style.display = "block"
            loadImg(i)
            e.stopPropagation()
        });
    }

    function loadImg(index) {
        centerImg.src=images[index].src
    }
</script>

</html>